import React, { useReducer, useEffect } from "react";
import "./mine.css"
import { Carousel, WingBlank } from 'antd-mobile';
import { initState, reducer, actions } from "./mine";
import {reqGetbanner } from "../../request/api"
const Mine = () => {
  const [state, dispatch] = useReducer(reducer, initState);
  let {banner} = state
  //进来页面
  useEffect(() => {
    // 轮播图
      reqGetbanner().then(res => {
          if (res.data.code === 200) {
              dispatch(actions.changeBanner(res.data.list))
          }
      })
  }, []);
  let req = () => {

  }
  return (
    <div className="pad">
      <div className="bg">
        <header>
          <div>
            <img src="" alt="" />
            <div>
              <p>代用名</p>
              <p>完善资料让小U更懂您</p>
            </div>
          </div>
          <div>
            <img src="" alt="" />
            <p>每日签到</p>
          </div>
        </header>
        <nav>
          <div>
            <p>12</p>
            <p>我的收藏</p>
          </div>
          <div>
            <p>12</p>
            <p>浏览记录</p>
          </div>
          <div>
            <p>￥0</p>
            <p>我的红包</p>
          </div>
          <div>
            <p>12</p>
            <p>优惠券</p>
          </div>
        </nav>
        <div className="mine_content1">
          <div>
            <div>我的订单</div>
            <a href="">全部订单></a>
          </div>
          <ul>
            <li>
              <img src="" alt="" />
              <p>待付款</p>
            </li>
            <li>
              <img src="" alt="" />
              <p>待收货</p>
            </li>
            <li>
              <img src="" alt="" />
              <p>评价</p>
            </li>
            <li>
              <img src="" alt="" />
              <p>售后/退款</p>
            </li>
          </ul>
        </div>
        <div className="mine_banner">
          <ul>
            {
              <WingBlank>
                <Carousel
                  autoplay={false}
                  infinite
                  beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                  afterChange={index => console.log('slide to', index)}
                >
                  {banner.map(val => (
                    <a
                      key={val}
                      href="http://www.alipay.com"
                      style={{ display: 'inline-block', width: '100%', height: "100px" }}
                    >
                      <img
                        src={val.img}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                        onLoad={() => {
                          window.dispatchEvent(new Event('resize'));
                          // this.setState({ imgHeight: 'auto' });
                        }}
                      />
                    </a>
                  ))}
                </Carousel>
              </WingBlank>
            }
          </ul>
        </div>
        <ul className="mine_content2">
          <li>
            <div>
              <img src="" alt="" />
              <p>地址管理</p>
            </div>
            <div>
              <img src="" alt="" />
            </div>
          </li>
          <li>
            <div>
              <img src="" alt="" />
              <p>我的钱包</p>
            </div>
            <div>
              <p>剩余200U币</p>
              <img src="" alt="" />
            </div>
          </li>
          <li>
            <div>
              <img src="" alt="" />
              <p>我的二维码</p>
            </div>
            <div>
              <img src="" alt="" />
            </div>
          </li>
          <li>
            <div>
              <img src="" alt="" />
              <p>我的小伙伴</p>
            </div>
            <div>
              <img src="" alt="" />
            </div>
          </li>
          <li>
            <div>
              <img src="" alt="" />
              <p>0元试用</p>
            </div>
            <div>
              <img src="" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Mine;
